<template>
    <view class="con_box">
        <view class="top"></view>
        <view class="ava_box" @click="upLoadAvatar">
            <text class="ava">头像</text>
            <view class="avatar">
                <view class="avaImg">
                    <image :src="src||currentUserDatas.userHeaderImage" mode="widthFix"></image>
                </view>
                <image src="/static/icon/img_icon15.png@2x.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="nickname_box" @click="goChangePage">
            <text class="nick">昵称</text>
            <view class="nickname">
                <view class="name">{{currentUserDatas.userNickname}}</view>
                <image src="/static/icon/img_icon15.png@2x.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="nickname_prompt_box">
            <text class="prompt">昵称每30天可修改一次哦</text>
            <text class="prompt">2~8字之间</text>
        </view>
        <view class="gender_box">
            <view class="gender_name">性别</view>
            <radio-group class="gender_choose" @change="radioChange">
                <label class="radio">
                    <radio value="男" :checked="currentUserDatas.userSex==='男'"/>男</label>
                <label class="radio">
                    <radio value="女" :checked="currentUserDatas.userSex==='女'"/>女</label>
            </radio-group>
        </view>
        <view class="tel_box">
            <text>电话</text>
            <text>{{currentUserDatas.userPhone}}</text>
        </view>
        <view class="signature_box">个性签名</view>
        <!-- <view class="signature">这家伙很懒，没有留下简介...</view> -->
        <textarea class="signature" v-model="currentUserDatas.userDescribe" maxlength=30 @input="getInfoLength" @change="editOtherInfo" />
        <view class="signature_character">{{length}}/30</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                picked: "",
                length:0,
                currentUserDatas:{},
                src:'' 
            }
        },
        methods: {
            //上传头像
            upLoadAvatar(){
                let that=this;
                const token = uni.getStorageSync('token');
               uni.chooseImage({
                   count:1, //默认9
                   sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                   sourceType: ['album'], //从相册选择
                   success: function (res) {
                        that.src=res.tempFilePaths[0],
                        console.log(res)
                         uni.uploadFile({
                                   url: 'https://products.rimiedu.com:8085/comic-time/personal/editHeader', 
                                   filePath: res.tempFilePaths[0],
                                   name: 'file',
                                   formData: {
                                       // "host": '192.168.7.7',
                                       // "port":"8080"
                                   },
                                    header: {
                                           'Authorization': token
                                    },
                                   success: (uploadFileRes) => {
                                       console.log(uploadFileRes);
                                   }
                               });
                   }
               });
            },
            //选择性别
            radioChange(e) {
                this.picked=e.detail.value
                // console.log(this.picked)
            },
            //获取个性签名长度
            getInfoLength(e){
                this.length=e.detail.value.length
            },
            //编辑其他信息
            editOtherInfo(){
                    const token = uni.getStorageSync('token');
                    this.$request(
                       '/comic-time/personal/editOther',
                    {
                        "userDescribe": this.currentUserDatas.userDescribe,
                        "userSex": this.picked
                    },
                        'POST',  
                    {
                        'Authorization': token,
                    },
                    ).then(res => {
                        // console.log(res)
                    }
                    );
            },
            
            //请求个人数据
            getPersonData() {     
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/viewMyProfile', {}, 'GET', {
                    'Authorization': token
                }).then(res => {
                    console.log(res)
                    this.currentUserDatas=res.data.recruitVo
                     //获取性别
                    this.picked=res.data.recruitVo.userSex
                    console.log(this.picked)
                    console.log(this.currentUserDatas)
                      //获取个性签名长度
                    if(this.currentUserDatas.userDescribe){
                        this.length=this.currentUserDatas.userDescribe.length
                    }else{
                        this.length=0
                    }
                });
            },
            //去修改页面
            goChangePage() {
                uni.navigateTo({
                    url: '/components/me/changeinfo'
                });
            },
        },
        
        mounted(){
            //获取当前个人信息
            this.getPersonData()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    @mixin box-style($height) {
        width: 750rpx;
        height: $height;
        box-sizing: border-box;
        background-color: #ffffff;
        border-bottom: 1rpx solid #e5e5e5;
        padding: 0 24rpx;
    }

    @mixin font-style {
        font-family: SourceHanSansCN-Medium;
        font-size: 32rpx;
        line-height: 48rpx;
        color: #333333;
    }

    .con_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .ava_box {
            @include box-style(144rpx);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ava {
                @include font-style;
            }

            .avatar {
                width:160rpx;
                height:104rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .avaImg{
                    width:104rpx;
                    height:104rpx;
                    background-color:#000;
                    border-radius:50%;
                    overflow:hidden;
                    image{
                        width:104rpx;
                        height:104rpx;
                    }
                }
                image{
                        width: 15rpx;
                        height: 28rpx;
                    }
            }
        }

        .nickname_box {
            @include box-style(119rpx);
            width:100%;
            box-sizing:border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .nick {
                @include font-style;
            }

            .nickname {
                // width: 180rpx;
                height: 40rpx;
                display:flex;
                align-items: center;
                justify-content: space-between;
   
                @include font-style;
                
                image{
                    width: 15rpx;
                    height: 28rpx;
                    margin-left:10rpx;
                }
            }

        }

        .nickname_prompt_box {
            @include box-style(47rpx);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .prompt {
                font-family: SourceHanSansCN-Light;
                font-size: 20rpx;
                line-height: 48rpx;
                color: #333333;
                border-bottom: 1rpx solid #e5e5e5;
            }
        }

        .gender_box {
            @include box-style(119rpx);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .gender_name {
                @include font-style;
            }

            .gender_choose {
                @include font-style;
                width: 200rpx;
                height: 50rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .tel_box {
            @include box-style(119rpx);
            @include font-style;
            line-height: 119rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .signature_box {
            @include box-style(94rpx);
            @include font-style;
            line-height: 94rpx;
        }

        .signature {
            @include box-style(164rpx);
            font-family: SourceHanSansCN-Medium;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #666666;
        }

        .signature_character {
            width: 750rpx;
            height: 29rpx;
            text-align: right;
            box-sizing: border-box;
            padding: 0 24rpx;
            font-family: SourceHanSansCN-Medium;
            font-size: 20rpx;
            line-height: 29rpx;
            color: #666666;
            background-color: #ffffff;
        }
    }
</style>
